<template>
	<view class="page">
		<!-- 列表 -->
		<component :is="pageInfo[infoType].widget" :list="list" @toPath="toPath"></component>

		<!-- 为空 和 加载更多 -->
		<u-empty v-if="page >= 1 && !list.length" text="数据为空" mode="list"></u-empty>
		<u-loadmore v-else :status="loadStatus" />

		<!-- 查询条件 -->
		<u-select :mode="select.mode" v-model="select.status" :list="select.list" @confirm="selectCheck"></u-select>
	</view>
</template>

<script>
import oRow from '@/components/oveui-layout/o-row/o-row.vue';
import oCol from '@/components/oveui-layout/o-col/o-col.vue';
import customer from './components/customer.vue';
import preSales from './components/preSales.vue';
import business from './components/business.vue';
import quotation from './components/quotation.vue';
import contract from './components/contract.vue';
import receivables from './components/receivables.vue';

export default {
	components: { oRow, oCol, customer, preSales, business, quotation, contract, receivables },
	data: () => ({
		// 权限
		auth: {},
		crmType: 'customer',
		infoType: 'todayCustomer',
		// 第几页
		page: 1,
		// 每页显示数量
		limit: 10,
		// 列表数据
		list: [],
		// 导航栏标题、列表子组件对照表
		pageInfo: {
			todayCustomer: {
				title: '今日需联系客户',
				widget: 'customer',
				list: [
					[
						{ label: '今日需要联系', value: 1 },
						{ label: '已逾期', value: 2 },
						{ label: '已联系', value: 3 },
					],
					[
						{ label: '我的', value: 1 },
						{ label: '我下属的', value: 2 },
					],
				],
			},
			followLeads: {
				title: '分配给我的潜在客户',
				widget: 'customer',
				list: [
					{ label: '待跟进', value: 1 },
					{ label: '已跟进', value: 2 },
				],
			},
			followCustomer: {
				title: '分配给我的目标客户',
				widget: 'customer',
				list: [
					{ label: '待跟进', value: 1 },
					{ label: '已跟进', value: 2 },
				],
			},
			putInPoolRemind: {
				title: '待进入公海的客户',
				widget: 'customer',
				list: [
					{ label: '我的', value: 1 },
					{ label: '我下属的', value: 2 },
				],
			},
			checkLeads: {
				title: '待审核潜在客户',
				widget: 'customer',
				list: [
					{ label: '待审核', value: 1 },
					{ label: '已审核', value: 2 },
				],
			},
			checkCustomer: {
				title: '待审核目标客户',
				widget: 'customer',
				list: [
					{ label: '待审核', value: 1 },
					{ label: '已审核', value: 2 },
				],
			},
			followPreSales: {
				title: '分配给我的售前申请',
				widget: 'preSales',
				list: [
					{ label: '未接受', value: 1 },
					{ label: '已接受', value: 2 },
				],
			},
			checkBusiness: {
				title: '待审核商机',
				widget: 'business',
				list: [
					{ label: '待审核', value: 1 },
					{ label: '已审核', value: 2 },
				],
			},
			checkPreSales: {
				title: '待审核设备清单',
				widget: 'preSales',
				list: [
					{ label: '未接受', value: 1 },
					{ label: '已接受', value: 2 },
				],
			},
			checkQuotation: {
				title: '待审核报价',
				widget: 'quotation',
				list: [
					{ label: '未接受', value: 1 },
					{ label: '已接受', value: 2 },
				],
			},
			checkContract: {
				title: '待审核合同',
				widget: 'contract',
				list: [
					{ label: '待审核', value: 1 },
					{ label: '已审核', value: 2 },
				],
			},
			checkReceivables: {
				title: '待审核回款',
				widget: 'checkReceivables',
				list: [
					{ label: '待审核', value: 1 },
					{ label: '已审核', value: 2 },
				],
			},
			remindReceivablesPlan: {
				title: '待回款提醒',
				widget: 'contract',
				list: [
					{ label: '待回款', value: 1 },
					{ label: '已回款', value: 2 },
					{ label: '已逾期', value: 3 },
				],
			},
			endContract: {
				title: '即将到期的合同',
				widget: 'contract',
				list: [
					{ label: '即将到期', value: 1 },
					{ label: '已到期', value: 2 },
				],
			},
		},
		// 底部加载状态
		loadStatus: 'loadmore',
		// select相关字段
		select: {
			status: false,
			mode: 'mutil-column',
			list: [],
			data: {
				type: 1,
				isSub: 1,
			},
		},
	}),
	methods: {
		// 获取权限
		async getAuth() {
			let auth = uni.getStorageSync('authList');
			if (auth.crm) {
				this.auth = auth.crm.contract;
			}
		},
		// 初始化下拉数据
		initPageData() {
			// 初始化查询条件
			this.initCondition();

			// 设置标题
			this.initTitle();
		},
		// 初始化查询条件
		initCondition() {
			this.select.mode = 'single-column';
			if (this.infoType === 'todayCustomer') {
				this.select.mode = 'mutil-column';
			}
			this.select.list = this.pageInfo[this.infoType].list;
		},
		// 设置标题
		initTitle() {
			uni.setNavigationBarTitle({
				title: this.pageInfo[this.infoType].title,
			});
		},
		// 打开查询条件
		selectOpen() {
			this.select.status = true;
		},
		// 选中的值
		selectCheck(e) {
			if (this.infoType === 'todayCustomer') {
				this.select.data.type = e[0].value;
				this.select.data.isSub = e[1].value;
			} else if (this.infoType === 'putInPoolRemind') {
				this.select.data.type = 1;
				this.select.data.isSub = e[0].value;
			} else {
				this.select.data.type = e[0].value;
				this.select.data.isSub = 1;
			}

			this.page = 1;
			this.getList();
		},
		// 获取列表
		async getList() {
			this.loadStatus = 'loading';
			let data = {
				page: this.page,
				limit: this.limit,
			};

			// 把条件带进来
			data = Object.assign(data, this.select.data);

			let res = await this.$api.customer.todoList[this.infoType](data);
			if (res.code == 200) {
				let list = res.data.list || [];
				if (this.page === 1) {
					this.list = list;
				} else {
					this.list.push(...list);
				}

				// list为空，说明没有更多数据了，显示没有更多数据的提示
				if (!list.length || (this.page == 1 && list.length <= res.data.totalRow)) {
					this.loadStatus = 'nomore';
				}
			}
		},
		// 跳转
		toPath(row) {
			let url = '';
			let urls = {
				// 商机详细
				business: '/pages/customerManagement/businessShow/businessShow' + '?id=' + row.businessId,
				// 设备清单详情
				preSales: '/pages/customerManagement/preSalesShow/preSalesShow' + '?id=' + row.preSalesId,
				// 报价详细
				quotation: '/pages/customerManagement/quotationShow/quotationShow' + '?id=' + row.quotationId,
				// 合同清单详细
				contract: '/pages/customerManagement/contractShow/contractShow' + '?id=' + row.contractId,
				// 待审核回款详细 TODO: 可能得单独写页面
				receivables: '/pages/customerManagement/contractShow/contractShow' + '?id=' + row.contractId,
				// 待回款提醒详细 TODO: 可能得单独写页面
				receivables_plan: '/pages/customerManagement/contractShow/contractShow' + '?id=' + row.contractId,
			};

			// 构建跳转url
			if (['customer', 'leads', 'pool', 'contacts'].includes(this.crmType)) {
				// 跳转到客户详细
				url = this.pathToCustomer(row);
			} else {
				// 查询对照表
				url = urls[this.crmType];
			}
			// 跳转
			uni.navigateTo({
				url: url,
			});
		},
		// 跳转到客户详细
		pathToCustomer(row) {
			let params = {};
			if (this.crmType == 'contacts') {
				params = {
					crmId: row.contactsId,
					crmType: 'contacts',
					data: row,
				};
			}

			if (['customer', 'leads', 'pool'].includes(this.crmType)) {
				params = {
					crmId: row.customerId,
					recordId: row.examineRecordId,
					ownerUserId: row.ownerUserId || '',
					crmType: 'customer',
					data: row,
				};
			}
			return '/pages/customerManagement/common/CrmBaseInfo?params=' + encodeURIComponent(JSON.stringify(params));
		},
	},
	computed: {},
	watch: {},

	// 周期函数--监听页面加载
	onLoad(option) {
		this.crmType = option.crmType;
		this.infoType = option.infoType;
	},
	// 周期函数--监听页面初次渲染完成
	onReady() {},
	// 周期函数--监听页面显示
	onShow() {
		this.initPageData();
		this.getAuth();
		this.getList();
	},
	// 周期函数--监听页面隐藏
	onHide() {},
	// 周期函数--监听页面卸载
	onUnload() {},
	// 页面处理函数--监听用户下拉动作
	async onPullDownRefresh() {
		this.page = 1;
		await this.getList();
		uni.stopPullDownRefresh();
	},
	// 页面处理函数--监听用户上拉触底
	async onReachBottom() {
		this.page++;
		await this.getList();
	},
	// 监听自定义标题栏按钮事件
	onNavigationBarButtonTap(e) {
		this.selectOpen();
	},
	// 页面处理函数--监听页面滚动
	/* onPageScroll(event) {}, */
	// 页面处理函数--用户点击右上角分享
	/* onShareAppMessage(options) {}, */
};
</script>

<style lang="scss" scoped>
.page /deep/ {
	.u-collapse-item {
		position: relative;
		background: #fff;
		&:after {
			content: '';
			position: absolute;
			left: 0;
			bottom: 0;
			right: 0;
			height: 1px;
			background: #e4e7ed;
			transform: scaleY(0.5);
		}
		.item-hd {
			width: 100%;
			margin: 0 13px;

			.o-row {
				margin: 0;
			}
			.o-row:last-child {
				margin-top: 10px;
				margin-bottom: 5px;
				color: $uni-color-subtitle;
				font-size: 12px;
			}
		}
		.item-bd {
			font-size: 14px;
			margin: 0 13px;
		}
		.o-row {
			margin: 8px 0;
			.o-col {
				.key,
				.val {
					display: inline-block;
					vertical-align: middle;
				}
			}

			.title {
				height: 27px;
				line-height: 27px;
				.val {
					max-width: 175px;
					height: 27px;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}
	}
}
</style>
